<template>
  <el-dialog title="修改信息" width="500px" :visible.sync="dialogFormVisible"
             :close-on-press-escape="false"
             :close-on-click-modal="false"
             :show-close="false" @closed="closed()">
    <el-form :model="form" label-width="80px" label-position="right" size="small">
      <el-form-item label="用户名">
        <el-col :span="16"><el-input :maxlength="32" v-model="userInfo.userName" readonly></el-input></el-col>
      </el-form-item>
      <el-form-item label="昵称" >
        <el-col :span="16"><el-input v-model="form.nickName" autocomplete="off"></el-input></el-col>
      </el-form-item>
<!--      <el-form-item label="头像" >-->
<!--        <el-col :span="16">-->
<!--          <input name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="selectPic"/>-->
<!--        </el-col>-->
<!--      </el-form-item>-->
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closed()">取 消</el-button>
      <el-button type="primary" @click="submit()">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {changeUserInfo} from "@/api/user";

export default {
  name: "EditUserInfo",
  props: {'dialogFormVisible' : Boolean,
          'userInfo' : {
            type : Object,
          }
  },
  data(){
    return {
      form:{
        nickName: this.userInfo.nickName,
        headUrl: '',
        avatarUrl: this.userInfo.avatarUrl,
      },
      formLabelWidth: '120px',
      images: [],
      newAvatarUrl: '',
      loading: false,
      fileTemp: null,
    }
  },
  methods: {
    closed(){
      this.form.nickName = this.userInfo.nickName
      this.form.avatarUrl = this.userInfo.avatarUrl
      this.form.headUrl = ''
      let _this = this
      _this.$emit("changeUserInfoClose", false)
    },
    selectPic(e){
      let _this = this
      let file = e.target.files[0]
      _this.fileTemp = file
    },
    submit(){
      if(this.form.nickName.trim() == ''){
        this.$message({
          message: '群聊名不能为空字符',
          type: 'warning'
        });
        this.form.chatName = this.userInfo.nickName
      }else{
        let userInfo = {
          userName: this.userInfo.userName,
          nickName: this.form.nickName,
          avatarUrl: this.form.headUrl,
        }
        // let userInfo = new FormData()  // 创建form对象
        // userInfo.append('userName', this.userInfo.userName)
        // userInfo.append('nickName', this.form.nickName)
        // userInfo.append('file', this.fileTemp)  // 通过append向form对象添加数据
        changeUserInfo(userInfo)
          .then(response => {
            let data = response.data
            if(data.code == 200){
              this.$notify({
                title: '成功',
                message: data.data,
                duration: 2500,
                type: 'success'
              });
            }
          })
        this.closed()
      }
    },
    /**
     * 图片上传
     */
    putObject () {
      console.log("上传")
    },
    handleAvatarSuccess(res, file) {
      this.newAvatarUrl = res
      this.form.avatarUrl = URL.createObjectURL(file.raw)
    },
    uploadProcess() {
      this.loading = true
    },
    /**
     * 图片限制
     */
    beforeAvatarUpload (file) {
      const isJPEG = file.name.split('.')[1] === 'jpeg';
      const isJPG = file.name.split('.')[1] === 'jpg';
      const isPNG = file.name.split('.')[1] === 'png';
      const isLt500K = file.size / 1024 / 500 < 2;
      if (!isJPG && !isJPEG && !isPNG) {
        this.$message.error('上传图片只能是 JPEG/JPG/PNG 格式!');
      }
      if (!isLt500K) {
        this.$message.error('单张图片大小不能超过 500KB!');
      }
      return (isJPEG || isJPG || isPNG) && isLt500K;
    },

    /**
     * 移除图片
     */
    handleRemove (file, fileList) {
      console.log(`移除图片回调`, fileList);
    }
  },
}
</script>

<style scoped>
.dialog-header {
  width: 100%;
  height: 50px;
  line-height: 50px;
  color: #fff;
  background-color: #0A53A4;
}
.avatar-uploader  {
  border: 1px dashed #d9d9d9;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  height: 80px;
  width: 80px;
  margin: 0;
  padding: 0;
}
.avatar-uploader:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 100%;
  height: 100%;
  display: block;
}
</style>